<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Vue Shopping Cart</title>
    <script src="./js/vue.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        h2 {
            color: #333;
            text-align: center;
        }

        .cart-box,
        .products-list {
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .cart-empty {
            color: #999;
            text-align: center;
        }

        .add-product-link {
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        input[type="number"] {
            width: 50px;
            padding: 5px;
            text-align: center;
        }

        button {
            background-color: #cb2443;
            color: #fff;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 4px;
        }

        .exit {
            background-color: black;
            /* 使按钮成为块级元素 */
            display: block;
            /* 上下外边距为20px，左右外边距为auto，使按钮水平居中 */
            margin: 20px auto;
            /* 设置按钮宽度，可以根据需要调整 */
            width: 120px;
        }

        button:hover {
            background-color: #0056b3;
        }

        .total {
            text-align: right;
            font-weight: bold;
            margin-top: 10px;
        }

        .cart-count {
            text-align: left;
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <!-- 购物车方框 -->
        <div class="cart-box">
            <h2>我的购物车</h2>
            <div v-if="cart.length === 0" class="cart-empty">
                购物车为空 <span class="add-product-link" @click="showProducts = true">请添加商品</span>
            </div>
            <table v-else>
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>小计</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in cart" :key="item.id">
                        <td>{{ item.name }}</td>
                        <td>{{ item.price }} 元</td>
                        <td>
                            <input type="number" v-model="item.quantity" @change="updateSubtotal(item)" min="1">
                        </td>
                        <td>{{ item.price*item.quantity}} 元</td>
                        <td>
                            <button @click="removeFromCart(item)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="total" v-if="cart.length>0">总计：{{ total }} 元</div>
            <div class="cart-count" v-if="cart.length>0">共有{{ cart.length }} 件商品</div>
        </div>

        <!-- 商品列表页面 -->
        <div v-if="showProducts" class="products-list">
            <h2>商品列表</h2>
            <table>
                <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="product in products" :key="product.id">
                        <td>{{ product.name }}</td>
                        <td>{{ product.price }} 元</td>
                        <td>
                            <button @click="addToCart(product)">加入购物车</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button @click="showProducts = false" class="exit">关闭商品列表</button>
        </div>
    </div>



</body>

</html>
<script>
    // 创建 Vue 应用实例
    new Vue({
        el: '#app',
        data: {
            products: [
                { id: 1, name: '苹果', price: 5 },
                { id: 2, name: '香蕉', price: 3 },
                { id: 3, name: '橙子', price: 4 }
            ],
            cart: [],
            showProducts: false,
        },
        methods: {
            // 将商品添加到购物车
            addToCart(product) {
                const number = this.cart.find(item => item.id === product.id);
                if (number) {
                    number.quantity += 1;
                } else {
                    this.cart.push({ ...product, quantity: 1 });
                }
                if (number.quantity < 1) {
                    number.quantity = 1;
                }
            },
            // 删除
            removeFromCart(item) {
                const index = this.cart.indexOf(item);
                if (index !== -1) {
                    this.cart.splice(index, 1);
                }
                if (this.cart.length == 0) {
                    this.showProducts = false;
                }
            },
            updateSubtotal(item) {
                //当数量等于1时，不能再减
                if (item.quantity < 1) {
                    item.quantity = 1;
                }
            },
        },
        computed: {
            //计算小计
            itemSubtotal(item) {
                return item.price * item.quantity;
            },
            //计算总计
            total(item) {
                return this.cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            },
            // 计算购物车中商品的总数量
            cartCount() {
                return this.cart.reduce((sum, item) => sum + item.quantity, 0);
            }
        },

    });
</script>